<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import SearchSongs from './components/SearchSongs.vue'
import SearchPlayList from './components/SearchPlayList.vue'
import SearchMusicVideo from './components/SearchMusicVideo.vue'

const route = useRoute()

// Tabs 的激活页
const activeName = ref('1')

</script>

<template>
  <div class="search-container">
    “{{ route.params.name }}”的搜索结果：

    <el-tabs v-model="activeName" class="demo-tabs" :stretch="true">
      <el-tab-pane label="单曲" name="1" :lazy="true">
        <SearchSongs :searchName="route.params.name" v-if="activeName === '1'" />
      </el-tab-pane>
      <el-tab-pane label="歌单" name="1000" :lazy="true">
        <SearchPlayList :searchName="route.params.name" v-if="activeName === '1000'" />
      </el-tab-pane>
      <el-tab-pane label="MV" name="1004" :lazy="true">
        <SearchMusicVideo :searchName="route.params.name" v-if="activeName === '1004'" />
      </el-tab-pane>
      <el-tab-pane label="用户" name="1002" :lazy="true">
        用户
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang='scss'>
.search-container {
  max-width: 1165px;
  margin: 0 auto;

  :deep(.el-tabs__item) {
    height: 60px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
